<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">


<head>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/img/sousuo.png}">
    <meta charset="utf-8" />
    <title>商品搜索</title>
    <style type="text/css">
        .btns{
            /*style="width:143px; height:40px;color:#FFF;"*/
            width : 60px;
            height: 40px;
            color: #FFF;
            background-color: #b4a078;
            border: none;
        }
        .aHref{
            color: #b4a078;
            width: 25px;
            height: 50px;
            font-size: 14px;
            padding: 5px;
            background-color: #fff;
            border: 1px solid #b4a078;
            position: relative;
        }
        .screen{
            color: #b4a078;
            width: 25px;
            height: 50px;
            font-size: 16px;
            padding: 5px;
            background-color: #fff;
            position: relative;
        }

        .aHref:hover{
            color: orangered;
            text-decoration: none;
        }
        .baoyou,.stock{
            color: #b4a078;
        }
        .baoyou:hover,.stock:hover{
            color: #b4a078;
            text-decoration: none;
        }
        .baoyou:hover i,.stock:hover i{
            background-color: #b4a078;
        }

        .baoyou i{
            display: inline-block;
            height: 12px;
            width: 12px;
            background-color: #fff;
            border: 1px solid #ccc;
            font-size: 0;
        }
        .stock i{
            display: inline-block;
            height: 12px;
            width: 12px;
            background-color: #fff;
            border: 1px solid #ccc;
            font-size: 0;
        }
        #priceBetween{
            color: #b4a078;
            width: 25px;
            height: 50px;
            font-size: 14px;
            padding: 5px;
            background-color: #fff;
            position: relative;
            text-decoration: none;
        }
        #paging{
            margin: 0 440px;
        }
        #paging li{
            float: left;
        }
    </style>
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/head.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/search.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/swiper-4.3.5.min.css}"/>
    <!--		<link rel="stylesheet" th:href="@{/css/jquery.page.css}">-->
    <link rel="stylesheet" th:href="@{/administration/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css}">
</head>

<body class="relative">
<div th:replace="head::topbar"></div>

<div class="container" style="position: relative">

    <div class="goodsArea">
    </div>
    <div class="row">
        <div class="col-md-1 ">
            <a class="screen" href="#">筛选：</a>
        </div>
        <div class="col-md-2 ">
            <input id="comKeyword" name="keyword" type="hidden" th:value="${keyword} == '' ? '' : ${keyword}">
            <a class="aHref" href="javascript:zonghe()"><input id="zonghe" type="hidden" name="zonghe" value="0"/>综合</a>
        </div>
        <div class="col-md-2">
            <a class="aHref" href="javascript:pricePaixu()"><input id="pricePaixu" type="hidden" name="pricePaixu" value="1"/>价格排序↑↓</a>
        </div>
        <div class="col-md-2">
            <a class="aHref" href="javascript:pingfen()"><input id="comment" type="hidden" name="comment" value="2"/>评分排序↑↓</a>
        </div>
        <div class="col-md-1">
            <a class="baoyou" href="javascript:baoyou()"><input id="baoyou" type="hidden" name="baoyou" value="3"/>包邮
                <i id="freeShippingIdentify"></i>
            </a>
        </div>
        <div class="col-md-1">
            <a class="stock" href="javascript:kucun()"><input id="kucun" type="hidden" name="kucun" value="4"/>库存
                <i id="stockIdentify"></i>
            </a>
        </div>
        <div  class="col-md-3">
            <span style="color: #b4a078;">价格区间：</span>
            <input id="priceFont" type="text" name="priceFont" style="width: 40px;height: 20px" th:value="${priceFont} == '' ? '' : ${priceFont}">
            -
            <input id="priceFoot" type="text" name="priceFoot" style="width: 40px;height: 20px" th:value="${priceFoot} == '' ? '' : ${priceFoot}">
            <a id="priceBetween" href="javascript:priceBetween()">提交</a>
        </div>
    </div>

    <div class="content-category" style="margin-top: 20px">
        <ul class="itemList clearfix" style="width: 1200px">
            <li class="item fl"  th:each="pd:${productList}">
                <div class="head">
                    <a th:href="@{/product/goods-details(productId=${pd.getProductId()})}"><img class="tran5" width="256" th:src="@{${pd.getImgSrc()}}" /></a>
                </div>
                <div class="prdtTags">
                    <span>新品</span>
                </div>
                <div class="name1">
                    <span><a href="" th:text="${pd.getProductName()}"></a></span>
                </div>
                <p class="price" th:text="'￥'+${pd.getProductPrice()}"></p>
                <div class="behoof">
                    <div class="bar">

                    </div>
                    <p>用券立省400元</p>
                </div>
            </li>

        </ul>
    </div>
    <div  aria-label="Page navigation" style="width: 1140px">
        <ul class="pagination" id="paging">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li id="fenyeSelect">
                <input id="sort" type="hidden" th:value="${sort} == null ? '' : ${sort}"/>
                <input id="Youfei" type="hidden" th:value="${Youfei} == null ? '' : ${Youfei}"/>
                <input id="Count" type="hidden" th:value="${kucun} == null ? '' : ${kucun}"/>
                <a href="#" th:each="str : ${str}" th:text="${str}"></a>
            </li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </div>
</div>

<script th:src="@{/js/jquery-3.3.1.min.js}"} type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/head-foot.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/swiper-4.3.5.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/jquery1.42.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/jquery.SuperSlide.2.1.1.js}" type="text/javascript" charset="utf-8"></script>
<!--	<script type="text/javascript" th:src="@{/js/jquery.page.js}"></script>-->
<script th:src="@{/administration/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        //底部侧边栏关闭
        $(".icon-sidebarx").click(function() {
            $(this).parents(".sidebar-b-bac").remove();
        });
        //右边侧边栏关闭
        $(".icon-subx").click(function() {
            $(this).parents(".sub-list").css("display", "none");
        });
        //右边hover弹窗input隐藏出现
        $(".sub-inputbox").click(function() {
            $(this).prev(".icon-inputx").css("opacity", 1);
        });
        //下拉到200px侧边栏出现回到顶部且导航栏出现，上啦消失，且导航栏消失
        $(window).scroll(function() {
            var top = $(document).scrollTop();
            if(top > 200) {
                $(".sidebar-r-totop").css({
                    display: 'block'
                });
                $(".navigation-fix").slideDown();
            } else {
                $(".sidebar-r-totop").css({
                    display: 'none'
                });
                $(".navigation-fix").slideUp();
            }

        });
        //点击回到顶部，回到顶部
        $(".sidebar-r-totop").click(function() {
            $("html,body").animate({
                scrollTop: 0
            }, 500);
        });


    })

</script>
<script type="text/javascript">

    /**
     * 综合点击
     */
    function zonghe() {

        $("#sort").val($("#zonghe").val());
        var keyword = $("#comKeyword").val();
        var priceFont = $("#priceFont").val();
        var priceFoot = $("#priceFoot").val();
        var sort = $("#sort").val();
        var Youfei = "";
        var kucun = "";
        var YoufeiBiaoji = "";
        $("#Youfei").val('');
        var kucunBiaoji = "";
        window.location = "/search/commonSearch?keyword="+keyword+"&priceFont="+priceFont+"&priceFoot="+priceFoot+"&sort=" + sort + "&Youfei=" + Youfei + "&kucun=" + kucun +"&YoufeiBiaoji="+YoufeiBiaoji+"&kucunBiaoji="+kucunBiaoji;
    }


    /**
     * 价格排序点击
     */
    function pricePaixu() {
        $("#sort").val($("#pricePaixu").val());
        var keyword = $("#comKeyword").val();
        var priceFont = $("#priceFont").val();
        var priceFoot = $("#priceFoot").val();
        var sort = $("#sort").val();
        var Youfei = $("#Youfei").val();
        var kucun = $("#Count").val();
        var YoufeiBiaoji = $("#Youfei").val();
        var kucunBiaoji = $("#Count").val();
        window.location = "/search/commonSearch?keyword="+keyword+"&priceFont="+priceFont+"&priceFoot="+priceFoot+"&sort=" + sort + "&Youfei=" + Youfei + "&kucun=" + kucun +"&YoufeiBiaoji="+YoufeiBiaoji+"&kucunBiaoji="+kucunBiaoji;
    }

    /**
     * 评分点击
     */
    function pingfen() {
        $("#sort").val($("#comment").val());
        var keyword = $("#comKeyword").val();
        var priceFont = $("#priceFont").val();
        var priceFoot = $("#priceFoot").val();
        var sort = $("#sort").val();
        var Youfei = $("#Youfei").val();
        var kucun = $("#Count").val();
        var YoufeiBiaoji = $("#Youfei").val();
        var kucunBiaoji = $("#Count").val();
        window.location = "/search/commonSearch?keyword="+keyword+"&priceFont="+priceFont+"&priceFoot="+priceFoot+"&sort=" + sort + "&Youfei=" + Youfei + "&kucun=" + kucun +"&YoufeiBiaoji="+YoufeiBiaoji+"&kucunBiaoji="+kucunBiaoji;
    }
    /**
     * 包邮点击
     */
    function baoyou() {
        var keyword = $("#comKeyword").val();
        var priceFont = $("#priceFont").val();
        var priceFoot = $("#priceFoot").val();
        var sort = $("#sort").val();
        var Youfei = $("#Youfei").val();
        var kucun = $("#Count").val();
        var YoufeiBiaoji
        if(Youfei == 3){
            YoufeiBiaoji = '';
            Youfei = ''
            $("#Youfei").val('');
        }else{
            YoufeiBiaoji = $("#baoyou").val();
            Youfei = 3
            $("#Youfei").val($("#baoyou").val());
        }
        var kucunBiaoji = $("#Count").val();
        window.location = "/search/commonSearch?keyword="+keyword+"&priceFont="+priceFont+"&priceFoot="+priceFoot+"&sort=" + sort + "&Youfei=" + Youfei + "&kucun=" + kucun +"&YoufeiBiaoji="+YoufeiBiaoji+"&kucunBiaoji="+kucunBiaoji;
    }

    /**
     * 库存点击
     */
    function kucun() {
        var keyword = $("#comKeyword").val();
        var priceFont = $("#priceFont").val();
        var priceFoot = $("#priceFoot").val();
        var sort = $("#sort").val();
        var Youfei = $("#Youfei").val();
        var kucun = $("#Count").val();
        var YoufeiBiaoji = $("#Youfei").val();
        var kucunBiaoji = $("#kucun").val();
        if(kucun == 4){
            kucunBiaoji = '';
            kucun = ''
            $("#Count").val('');
        }else{
            kucunBiaoji = $("#kucun").val();
            kucun = 4
            $("#Count").val($("#kucun").val());
        }
        window.location = "/search/commonSearch?keyword="+keyword+"&priceFont="+priceFont+"&priceFoot="+priceFoot+"&sort=" + sort + "&Youfei=" + Youfei + "&kucun=" + kucun +"&YoufeiBiaoji="+YoufeiBiaoji+"&kucunBiaoji="+kucunBiaoji;
    }

    /**
     * 价格区间点击
     */
    function priceBetween() {
        var keyword = $("#comKeyword").val();
        var priceFont = $("#priceFont").val();
        var priceFoot = $("#priceFoot").val();
        var sort = $("#sort").val();
        var Youfei = $("#Youfei").val();
        var kucun = $("#Count").val();
        var YoufeiBiaoji = $("#Youfei").val();
        var kucunBiaoji = $("#Count").val();
        /*
         * 价格区间查询
         */
        window.location = "/search/commonSearch?keyword="+keyword+"&priceFont="+priceFont+"&priceFoot="+priceFoot+"&sort=" + sort + "&Youfei=" + Youfei + "&kucun=" + kucun +"&YoufeiBiaoji="+YoufeiBiaoji+"&kucunBiaoji="+kucunBiaoji;
    }

    /**
     * 点击分页进行查询
     */
    $("#fenyeSelect").find("a").each(function () {
        var keyword = $("#comKeyword").val();
        var priceFont = $("#priceFont").val();
        var priceFoot = $("#priceFoot").val();
        var sort = $("#sort").val();
        var Youfei = $("#Youfei").val();
        var kucun = $("#Count").val();
        var YoufeiBiaoji = $("#Youfei").val();
        var kucunBiaoji = $("#Count").val();
        $(this).click(function () {
            var pageNum = $(this).text();
            window.location = "/search/commonSearch?keyword="+keyword+"&priceFont="+priceFont+"&priceFoot="+priceFoot+"&sort=" + sort + "&Youfei=" + Youfei + "&kucun=" + kucun +"&YoufeiBiaoji="+YoufeiBiaoji+"&kucunBiaoji="+kucunBiaoji+"&pageNum="+pageNum;
        })
    })

    $(document).ready(function (){
        if($("#Youfei").val() == 3){
            $("#freeShippingIdentify").css("backgroundColor","#b4a078")
        }else{
            $("#freeShippingIdentify").css("backgroundColor"," ")
        }


        if($("#Count").val() == 4){
            $("#stockIdentify").css("backgroundColor","#b4a078")
        }else{
            $("#stockIdentify").css("backgroundColor"," ")
        }
    });

</script>
</body>
</html>